<template>
  <el-dialog title="Cron表达式" :visible.sync="visible" width="760px" append-to-body :close-on-click-modal="false">
    <el-tabs v-model="activeName">
      <el-tab-pane label="秒" name="s">
        <second-and-minute v-model="sVal" label="秒" @change="sLabel = $event"></second-and-minute>
      </el-tab-pane>
      <el-tab-pane label="分" name="m">
        <second-and-minute v-model="mVal" label="分" @change="mLabel = $event"></second-and-minute>
      </el-tab-pane>
      <el-tab-pane label="时" name="h">
        <hour v-model="hVal" label="时" @change="hLabel = $event"></hour>
      </el-tab-pane>
      <el-tab-pane label="日" name="d">
        <day v-model="dVal" label="日" @change="dLabel = $event"></day>
      </el-tab-pane>
      <el-tab-pane label="月" name="month">
        <month v-model="monthVal" label="月" @change="monthLabel = $event"></month>
      </el-tab-pane>
      <el-tab-pane label="周" name="week">
        <week v-model="weekVal" label="周" @change="weekLabel = $event"></week>
      </el-tab-pane>
      <el-tab-pane label="年" name="year">
        <year v-model="yearVal" label="年" @change="yearLabel = $event"></year>
      </el-tab-pane>
    </el-tabs>
    <!-- table -->
    <el-table class="cron-table" :data="tableData" size="mini" border style="width: 100%;">
      <el-table-column prop="sVal" label="秒"></el-table-column>
      <el-table-column prop="mVal" label="分"></el-table-column>
      <el-table-column prop="hVal" label="时"></el-table-column>
      <el-table-column prop="dVal" label="日"></el-table-column>
      <el-table-column prop="monthVal" label="月"></el-table-column>
      <el-table-column prop="weekVal" label="周"></el-table-column>
      <el-table-column prop="yearVal" label="年"></el-table-column>
    </el-table>

    <el-form ref="form" label-width="100px">
      <el-form-item label="Cron表达式">
        <el-input v-model="cronValue"></el-input>
        <p>{{ cronLabel }}</p>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import SecondAndMinute from './components/secondAndMinute';
import Hour from './components/hour';
import Day from './components/day';
import Month from './components/month';
import Week from './components/week';
import Year from './components/year';

export default {
  name: "Cron",
  components: {
    SecondAndMinute,
    Hour,
    Day,
    Month,
    Week,
    Year
  },
  data() {
    return {
      visible: false,
      value: undefined,
      label: undefined,
      activeName: 's',
      sVal: '',
      sLabel: '',
      mVal: '',
      mLabel: '',
      hVal: '',
      hLabel: '',
      dVal: '',
      dLabel: '',
      monthVal: '',
      monthLabel: '',
      weekVal: '',
      weekLabel: '',
      yearVal: '',
      yearLabel: ''
    }
  },
  created() {
    this.updateVal();
  },
  methods: {
    init(value) {
      this.visible = true;
      this.value = value;
      this.updateVal();
    },
    updateVal() {
      if (!this.value) {
        return;
      }
      let arrays = this.value.split(' ');
      this.sVal = arrays[0];
      this.mVal = arrays[1];
      this.hVal = arrays[2];
      this.dVal = arrays[3];
      this.monthVal = arrays[4];
      this.weekVal = arrays[5];
      this.yearVal = arrays[6];
    },
    close() {
      this.visible = false;
    },
    submitForm() {
      if (this.dVal === '?' && this.weekVal === '?') {
        this.$message.error('日期与星期不可以同时为“不指定”');
        return;
      }
      if (this.dVal !== '?' && this.weekVal !== '?') {
        this.$message.error('日期与星期必须有一个为“不指定”');
        return;
      }

      this.$emit("change", this.value, this.label);
      this.close();
    }
  },
  computed: {
    tableData() {
      return [{
        sVal: this.sVal,
        mVal: this.mVal,
        hVal: this.hVal,
        dVal: this.dVal,
        monthVal: this.monthVal,
        weekVal: this.weekVal,
        yearVal: this.yearVal
      }];
    },
    cronValue() {
      if (!this.dVal && !this.weekVal) {
        return '';
      }
      if (this.dVal === '?' && this.weekVal === '?') {
        this.$message.error('日期与星期不可以同时为“不指定”');
      }
      if (this.dVal !== '?' && this.weekVal !== '?') {
        this.$message.error('日期与星期必须有一个为“不指定”');
      }

      this.monthVal = this.monthVal === "*" && this.yearVal !== "*" && this.yearVal !== '' ? "1" : this.monthVal;
      this.dVal = this.dVal === "*" && this.monthVal !== "*" ? "1" : this.dVal;
      this.hVal = this.hVal === "*" && this.dVal !== "*" ? "0" : this.hVal;
      this.mVal = this.mVal === "*" && this.hVal !== "*" ? "0" : this.mVal;
      this.sVal = this.sVal === "*" && this.mVal !== "*" ? "0" : this.sVal;

      this.value = `${this.sVal} ${this.mVal} ${this.hVal} ${this.dVal} ${this.monthVal} ${this.weekVal} ${this.yearVal}`;
      return this.value;
    },
    cronLabel() {
      const labels = [];
      if (this.yearLabel && this.monthVal !== "*") {
        labels.push(this.yearLabel);
      }
      if (this.weekLabel) {
        labels.push(this.weekLabel);
      }
      if (this.monthLabel && this.dVal !== "*") {
        labels.push(this.monthLabel);
      }
      if (this.dLabel && this.hVal !== "*") {
        labels.push(this.dLabel);
      }
      if (this.hLabel && this.mVal !== "*") {
        labels.push(this.hLabel);
      }
      if (this.mLabel && this.sVal !== "*") {
        labels.push(this.mLabel);
      }
      if (this.sLabel) {
        labels.push(this.sLabel);
      }
      this.label = `${labels.join("，")}执行`;
      return this.label;
    }
  }
}
</script>

<style scoped lang="scss">
.cron-table {
  margin: 10px 0 16px 0;
}
</style>
